<style lang="less">
    @import '../styles/menu.less';
</style>

<template>
    <div class="iviewMenu">
        <Menu  :active-name="activeName" @on-select="handleMenu">
            <MenuGroup :key="index" :title="item.title" v-for="(item, index) in menuList">
                <MenuItem :key="i" :name="child.name" v-for="(child, i) in item.children">
                    <div class="childIcon">
                       <i :class="child.icon" style="font-size: 20px;margin-right: 15px"></i>
                       <span>{{child.title}}</span>
                    </div>
                </MenuItem>
            </MenuGroup>
        </Menu>
    </div>
</template>
<script>
    export default {
        name: 'iviewMenu',
        data() {
            return {
                activeName:'',
            };
        },
        components: {},
        props: {
            shrink: {
                type: Boolean,
                default: false
            },
            menuList: {
                type: Array,
                required: true
            },
            beforePush: {
                type: Function
            },
        },
        mounted() {
          
        },
        computed: {},
        watch: {
            $route(to) {
               
                
            },
        },
        methods: {
            handleMenu(name) {
                console.log(name)
                this.activeName = name
                this.$router.push({
                    name: name
                })
            },
        }
    };
</script>
